<template>
    <div>
        <el-row class="row--filter" type="flex" align="middle">
            时间：
            <el-date-picker
                    class="filter-item"
                    v-model="queryParameter.dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :clearable="false"
                    :value-format="dateFormat">
            </el-date-picker>
        </el-row>
        <el-row type="flex" justify="center" align="middle">
          <ChartBarLine :option="{title: '插件新增用户及环比', legend: ['插件新增用户', '环比']}" :data="ChartBarLine" />
          <ChartBar :option="{title: '插件净新增用户'}" :data="ChartBar" />
          <div class="run-out">
            <el-card>
                <span class="title" slot="header">{{ lostDate }}</span>
                <div class="card-content">
                  <div>流失用户</div>
                  <div>{{ lostNum }}</div>
                </div>
            </el-card>
            <el-card>
                <span class="title" slot="header">{{ silenceDate }}</span>
                <div class="card-content">
                  <div>沉默用户</div>
                  <div>{{ silenceNum }}</div>
                </div>
            </el-card>
          </div>
        </el-row>
    </div>
</template>

<script>
import { commonMixin as dateMixin } from '@/mixins/user-analysis'
import { subComponentMixin } from '@/mixins/user-analysis/user-operation'
import ChartBarLine from './chart-bar-line'
import ChartBar from './chart-bar'

export default {
  name: 'UserAcquireIndicator',
  mixins: [dateMixin, subComponentMixin],
  components: { ChartBarLine, ChartBar },
  data () {
    return {
      queryParameter: {
        dateRange: null
      },
      ChartBarLine: [],
      ChartBar: [],
      lostDate: '',
      lostNum: '',
      silenceDate: '',
      silenceNum: ''
    }
  },
  methods: {
    getData () {
      this._getPluginNewUserRatio()
      this._getPluginNewUserNet()
      this._getPluginLostUser()
      this._getPluginSilenceUser()
    },
    async _getPluginNewUserRatio () {
      const { data: { data, code } } = await this.$http
        .get(this.getApiUrl(`dataanalysis_iot/user_metrics/getPluginNewUserRatio`, false),
          {
            params: this.requestParams
          })
      if (code === 0) {
        this.ChartBarLine = data.map(({ chainRelativeRatio, day, newUser }) => {
          return {
            xAxis: day,
            line: chainRelativeRatio.replace(/%$/, ''),
            value1: newUser
          }
        })
      }
    },
    async _getPluginNewUserNet () {
      const { data: { data, code } } = await this.$http
        .get(this.getApiUrl(`dataanalysis_iot/user_metrics/getPluginNewUserNet`, false),
          {
            params: this.requestParams
          })
      if (code === 0) {
        this.ChartBar = data.map(({ day, netNewUser }) => {
          return {
            xAxis: day,
            value1: netNewUser
          }
        })
      }
    },
    async _getPluginLostUser () {
      const { data: { data, code } } = await this.$http
        .get(this.getApiUrl(`dataanalysis_iot/user_metrics/getPluginLostUser`, false),
          {
            params: this.requestParams
          })
      if (code === 0) {
        const { day, lostUser } = data
        this.lostDate = day
        this.lostNum = lostUser
      }
    },
    async _getPluginSilenceUser () {
      const { data: { data, code } } = await this.$http
        .get(this.getApiUrl(`dataanalysis_iot/user_metrics/getPluginSilenceUser`, false),
          {
            params: this.requestParams
          })
      if (code === 0) {
        const { day, silentUser } = data
        this.silenceDate = day
        this.silenceNum = silentUser
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";

    .row--filter {
        @include filter-row;

        .filter-item.el-date-editor {
            margin-left: 0;
        }
    }
    .run-out {
      flex: 1 0 auto;
      .el-card {
        font-size: 110%;
        font-weight: bold;
      }
      .card-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
</style>
